<template>
<div id="main-container">
  <div id="left-container">
    <div class="left-top"></div>
    <div class="left-center">
      <use-pie title="打标签"></use-pie>
    </div>
    <div class="left-bottom">
      <child ref="childRef" title="哈哈哈哈" :ageList='[1,2,3,4]' @parentClick="parentClick"></child>
    </div>
  </div>
  <div id="center-container"></div>
  <div id="right-container"></div>
</div>
</template>
<script setup lang="ts">
import usePie from '@/components/usePie.vue';
import child from '@/components/child.vue';
import { ref, onMounted } from 'vue'
const parentClick = (msg)=>{
  console.log(msg)
}
const childRef = ref<{getList:()=>void|null}>(null)
onMounted(() => {
  childRef.value?.getList()
})
</script>


<style scoped lang="scss"> 
#main-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}
#left-container{
    flex: 2;
    background-color: aqua;
    display: flex;
    flex-flow: column nowrap,
  
}
 .left-top {
      flex: 1;
    }
    .left-center {
      flex: 2;
      background-color: aquamarine
      
      
      ;
    }
    .left-bottom {
      flex: 2;
    }
#center-container{
    flex: 3;
    background-color:blue;
}
#right-container{
    flex: 2;
    background-color: aqua;
}
</style>
